
import React, { PureComponent } from 'react'
import { Button, Tabs } from 'antd';
import { connect } from 'react-redux'
import PageBackHeader from "@common/PageBackHeader";
import { withRouter } from 'react-router-dom'
import Platform from '@components/warehouse/Platform'
import AreaSetting from '@components/warehouse/AreaSetting'
import ExpressSetting from '@components/warehouse/ExpressSetting'
import { editWarehouse, creatWarehouse, getWarehouseInfo } from "@sagas/warehouse/warehouseManagement";
import {getHistoryMatchParams} from "@utils/setUrlQuery";

@connect(
    null
    , {
        creatWarehouse,
        editWarehouse,
        getWarehouseInfo
    })
@withRouter
class WarehouseSetting extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        console.log('location', location)
        this.state = {
            id,
            warehouseInfo:  {
                ...state,
            } 
        }
        this.goModify = this.goModify.bind(this)
    }

    goModify = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        const { id } = e.currentTarget.dataset
        this.props.getWarehouseInfo({
            id: id
        }, (res) => {
            history.push({
                pathname: `/warehouse/edit/${id}`,
                state: {
                    ...res
                }
            })
        })
    }

    render() {
        const { warehouseInfo, id } = this.state
        return (
            <div className="bilin-web">
                <PageBackHeader title='编辑仓库' />
                <div className="bilin-web-body with-footer">
                    <div className="warehouse-setting-page">
                        <div className='ft-24 ft-clr-d'>
                            {warehouseInfo.name}
                        </div>
                        <div className='mgt-12 flex-row-between'>
                            <div>
                                <span className="ft-12 ft-clr-ml">{warehouseInfo.contact}</span>
                                <span className="ft-12 ft-clr-ml mgl-12">{warehouseInfo.mobile}</span>
                                <span className="ft-12 ft-clr-ml mgl-12">{warehouseInfo.address}</span>
                            </div>
                            <div data-id={warehouseInfo.id} onClick={this.goModify} className="mgr-8 ft-hover">编辑</div>
                        </div>
                        <div className='mgt-12'>
                            { warehouseInfo.pickUp ?<span className='store-type mgr-12 clr-orange ft-12'>自提</span> : null}
                            { warehouseInfo.cityExpress ?<span className='store-type mgr-12 clr-orange ft-12'>同城配送</span> : null}
                            { warehouseInfo.ordinaryExpress ?<span className='store-type mgr-12 clr-orange ft-12'>普通快递</span> : null}
                        </div>
                        <Tabs className="mgt-8">
                            { warehouseInfo.cityExpress ?<Tabs.TabPane tab="同城配送" key="1">
                                <Platform id={id} />
                                <AreaSetting id={id} />
                            </Tabs.TabPane> : null}
                            { warehouseInfo.ordinaryExpress ?<Tabs.TabPane tab="普通快递" key="2">
                                <ExpressSetting id={id} />
                            </Tabs.TabPane> : null}
                        </Tabs>
                    </div>
                </div>
            </div>

        )
    }
}

export default WarehouseSetting